<template>
    <view class="container">
        <!-- 导航栏 -->
        <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="nav-back" @click="goBack">←</view>
            <view class="nav-title">维修历史</view>
            <view class="nav-actions"></view>
        </view>
        
        <!-- 历史记录列表 -->
        <view class="history-list">
            <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="viewDetail(item.id)">
                <!-- 维修记录头部 -->
                <view class="history-header">
                    <view class="shop-name">{{ item.shopName }}</view>
                    <view class="order-status" :class="getStatusClass(item.status)">{{ item.status }}</view>
                </view>
                
                <!-- 维修项目信息 -->
                <view class="service-info">
                    <view class="service-item" v-for="(service, idx) in item.services" :key="idx">
                        <text class="service-name">{{ service.name }}</text>
                        <text class="service-count">×{{ service.count }}</text>
                    </view>
                </view>
                
                <!-- 订单信息 -->
                <view class="order-info">
                    <text class="order-time">预约时间: {{ item.appointmentTime }}</text>
                    <text class="total-price">共{{ item.totalItems }}项 总计: <text class="price">¥{{ item.totalPrice }}</text></text>
                </view>
                
                <!-- 操作按钮 -->
                <view class="action-buttons">
                    <view v-if="item.status === '已完成'" class="action-btn primary-btn" @click.stop="goToEvaluate">评价服务</view>
                    <view v-if="item.status === '已完成'" class="action-btn secondary-btn" @click.stop="rebookService">再次预约</view>
                    <view v-if="item.status === '待服务'" class="action-btn cancel-btn" @click.stop="cancelOrder">取消预约</view>
                    <view v-if="item.status === '待服务'" class="action-btn primary-btn" @click.stop="goToDetail">查看详情</view>
                </view>
            </view>
            
            <!-- 无记录时显示 -->
            <view v-if="historyList.length === 0" class="empty-state">
                <image src="/static/image/repair/repair03.png" class="empty-image"></image>
                <text class="empty-text">暂无维修记录</text>
                <view class="empty-btn" @click="goToRepair">去预约</view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';

// 响应式数据
const statusBarHeight = ref(0); // 状态栏高度
const historyList = reactive([
    {
        id: 'ORD20231020001',
        shopName: '车百事汽车生活馆',
        status: '已完成',
        appointmentTime: '2023-10-15 14:30',
        services: [
            { name: '常规保养', count: 1 },
            { name: '机油更换', count: 1 }
        ],
        totalItems: 2,
        totalPrice: 498
    },
    {
        id: 'ORD20231010002',
        shopName: '泰山汽车服务站',
        status: '已完成',
        appointmentTime: '2023-10-10 09:00',
        services: [
            { name: '洗车服务', count: 1 },
            { name: '内饰清洁', count: 1 },
            { name: '轮胎检查', count: 1 }
        ],
        totalItems: 3,
        totalPrice: 288
    },
    {
        id: 'ORD20230925003',
        shopName: '大美汽车保养厂',
        status: '待服务',
        appointmentTime: '2023-10-25 16:00',
        services: [
            { name: '刹车系统检查', count: 1 },
            { name: '刹车片更换', count: 1 }
        ],
        totalItems: 2,
        totalPrice: 588
    }
]);

// 方法定义
function goBack() {
    uni.navigateBack();
}

function getStatusClass(status) {
    switch(status) {
        case '已完成':
            return 'status-completed';
        case '待服务':
            return 'status-pending';
        case '已取消':
            return 'status-canceled';
        default:
            return '';
    }
}

function viewDetail(id) {
    // 查看订单详情
    uni.navigateTo({
        url: `../bookingDetail/bookingDetail?id=${id}`
    });
}

function goToEvaluate() {
    // 去评价服务
    uni.showToast({
        title: '评价功能开发中',
        icon: 'none'
    });
}

function rebookService() {
    // 再次预约
    uni.navigateTo({
        url: '../booking/booking'
    });
}

function cancelOrder() {
    // 取消预约
    uni.showModal({
        title: '取消预约',
        content: '确定要取消这个预约吗？',
        success: (res) => {
            if (res.confirm) {
                uni.showToast({
                    title: '预约已取消',
                    icon: 'success'
                });
                // 这里可以添加更新状态的逻辑
            }
        }
    });
}

function goToDetail() {
    // 查看详情
    viewDetail('ORD20230925003');
}

function goToRepair() {
    // 去预约页面
    uni.navigateTo({
        url: '../booking/booking'
    });
}

onMounted(() => {
    // 获取状态栏高度，使用推荐的wx.getWindowInfo API
    try {
        const windowInfo = uni.getWindowInfo();
        statusBarHeight.value = windowInfo.statusBarHeight;
    } catch (error) {
        console.error('获取窗口信息失败:', error);
        statusBarHeight.value = 0;
    }
});
</script>

<style>
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.nav-bar {
    height: 88rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1E88E5;
    color: white;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-back {
    font-size: 20px;
}

.nav-title {
    font-size: 18px;
    font-weight: bold;
}

.nav-actions {
    width: 20px;
}

.history-list {
    padding: 10px;
}

.history-item {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.shop-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.order-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.status-completed {
    background-color: #E3F2FD;
    color: #1E88E5;
}

.status-pending {
    background-color: #FFF3E0;
    color: #FF9800;
}

.status-canceled {
    background-color: #EEEEEE;
    color: #757575;
}

.service-info {
    margin-bottom: 12px;
}

.service-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
}

.order-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 14px;
    color: #666;
}

.total-price .price {
    color: #FF5722;
    font-weight: bold;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.action-btn {
    padding: 6px 16px;
    border-radius: 15px;
    font-size: 12px;
}

.primary-btn {
    background-color: #1E88E5;
    color: white;
}

.secondary-btn {
    background-color: #F5F5F5;
    color: #333;
    border: 1px solid #E0E0E0;
}

.cancel-btn {
    background-color: #F5F5F5;
    color: #757575;
    border: 1px solid #E0E0E0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.empty-image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-text {
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
}

.empty-btn {
    background-color: #1E88E5;
    color: white;
    padding: 10px 30px;
    border-radius: 20px;
    font-size: 14px;
}
</style>